<template>
	<div class="smart_directory_wrapper">
		<div class="smart_directory_button">
			<div class="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenAiDir()">新建目录</el-button>
			</div>
			<el-form size="small" inline>
				<el-form-item>
					<el-input placeholder="请输入库名称" v-model="queryData.name">
						<el-button slot="append" icon="el-icon-search" @click="queryTableData"></el-button>
					</el-input>
				</el-form-item>
			</el-form>
		</div>
		<el-row :gutter="16" class="smart_directory_list">
			<el-col :span="responsive" v-for="(item, index) in tableData" :key="index">
				<aidir-item :data="item" @edit="handleOpenAiDir(item)"></aidir-item>
			</el-col>
		</el-row>
		<sw-pagination :total="dataCount" :page-sizes="queryPages" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData"></form-dialog>
	</div>
</template>

<script>
import aidirItem from './item';
import formDialog from './form';
import { getAiDirPageList, deleteAiDir } from '@/api/data/tbNetAiDir';
export default {
	components: { aidirItem, formDialog },
	data() {
		return {
			loading: false,
			queryData: { page: 1, limit: 60 },
			queryPages: [60, 120, 240],
			dataCount: 0,
			tableData: [],
			responsive: 4,
			formDialog: false,
			dataId: ''
		};
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
		this.queryTableData();
	},
	methods: {
		async getTableData() {
			let params = { ...this.queryData };
			let result = await getAiDirPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//动态列数
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if (width >= 1680) {
				this.responsive = 4;
			} else if (width >= 1440) {
				this.responsive = 5;
			} else {
				this.responsive = 6;
			}
		},

		//打开表单
		handleOpenAiDir(data) {
			this.dataId = !data ? '' : data.id;
			this.formDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.smart_directory_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
}
.smart_directory_button::v-deep {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-shrink: 0;
	.el-form-item {
		margin-bottom: 0;
		&:last-child {
			margin-right: 0;
		}
	}
	.el-input-group {
		width: 240px;
	}
}
.smart_directory_list {
	flex: 1;
	margin-top: 16px;
	overflow: hidden;
	overflow-y: auto;
	.el-col {
		margin-top: 16px;
		&:nth-child(1),
		&:nth-child(2),
		&:nth-child(3),
		&:nth-child(4) {
			margin-top: 0;
		}
	}

	.el-col-4 {
		&:nth-child(5),
		&:nth-child(6) {
			margin-top: 0;
		}
	}

	.el-col-5 {
		width: 20%;
		&:nth-child(5) {
			margin-top: 0;
		}
	}

	.item {
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}
}
</style>
